<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <body>
        <!-- <script>
          console.log('1')
          setTimeout(() => {
            console.log('2')
          }, 0)
          console.log('3')
        </script> -->
    
        <button>测试xhr是异步函数</button>
        <script>
          //   document.querySelector('button').addEventListener('click', function () {
          //     console.log('1')
    
          //     const xhr = new XMLHttpRequest()
          //     xhr.open('post', 'http://ajax-api.itheima.net/api/login')
          //     xhr.setRequestHeader('content-type', 'application/json')
    
          //     xhr.addEventListener('load', function () {
          //       //   console.log(xhr.response)
          //       //   console.log(JSON.parse(xhr.response))
          //       console.log('2')
          //     })
          //     let obj = {
          //       username: 'admin',
          //       password: '123456',
          //     }
          //     xhr.send(JSON.stringify(obj))
    
          //     console.log('3')
          //   })
        </script>
        <!-- <script>
          setTimeout(() => {
            console.log(1)
            setTimeout(() => {
              console.log(2)
              setTimeout(() => {
                console.log(3)
                setTimeout(() => {
                  console.log(3)
                  setTimeout(() => {
                    console.log(3)
                  }, 3000)
                }, 3000)
              }, 3000)
            }, 2000)
          }, 1000)
        </script> -->
    
        <script>
          const xhr1 = new XMLHttpRequest()
          xhr1.open('post', 'http://ajax-api.itheima.net/api/login')
          xhr1.setRequestHeader('content-type', 'application/json')
    
          xhr1.addEventListener('load', function () {
            console.log(xhr1.response)
            const xhr2 = new XMLHttpRequest()
            xhr2.open('post', 'http://ajax-api.itheima.net/api/login')
            xhr2.setRequestHeader('content-type', 'application/json')
    
            xhr2.addEventListener('load', function () {
              //   console.log(xhr.response)
              //   console.log(JSON.parse(xhr.response))
              console.log('2')
              const xhr3 = new XMLHttpRequest()
              xhr3.open('post', 'http://ajax-api.itheima.net/api/login')
              xhr3.setRequestHeader('content-type', 'application/json')
    
              xhr3.addEventListener('load', function () {
                //   console.log(xhr.response)
                //   console.log(JSON.parse(xhr.response))
                console.log('2')
              })
              let obj = {
                username: 'admin',
                password: '123456',
              }
              xhr3.send(JSON.stringify(obj))
            })
            let obj = {
              username: 'admin',
              password: '123456',
            }
            xhr2.send(JSON.stringify(obj))
          })
          let obj = {
            username: 'admin',
            password: '123456',
          }
          xhr1.send(JSON.stringify(obj))
        </script>
      </body>
</body>
</html>